<template>

	<div class="index" v-loading="loading">

		<div class="power" v-if="config">
			<el-button type="primary" round @click="pack()" v-if="power">下载为html</el-button>
			<el-button type="success" round @click="toSave()" v-html="savelabel" v-if="power"></el-button>
			<el-button type="info" round @click="settingVisible=true" v-if="power">设置</el-button>
			<el-dialog title="设置" :visible.sync="settingVisible" width="50%" :before-close="handleClose">
				<el-form :model="config" style="text-align: left;" label-width="100px">
					<el-form-item label="自动保存">
						<el-switch v-model="config.autoSave"></el-switch>
					</el-form-item>
					<el-form-item label="保存间隔(s)">
						<el-input v-model="config.autoSaveTime" @change="checkSaveTime" :disabled="!config.autoSave"></el-input>
					</el-form-item>
					<el-form-item label="项目名称" v-if="Nav.source">
						<el-input v-model="Nav.source.name" @change="changeTitle()"></el-input>
					</el-form-item>
				</el-form>
			</el-dialog>

			<el-switch v-model="power" active-text="管理权限" inactive-text=""></el-switch>
		</div>

		<div class="NIB" v-if="Nav.source">
			<Navs class="Nav" :Nav="Nav" :power="power"></Navs>
			<el-divider direction="vertical"></el-divider>
			<Info v-if="Nav.Node" class="Info" :Nav="Nav" :power="power"></Info>
		</div>
	</div>
</template>

<script>
	import Navs from './components/Nav.vue'
	import Info from './components/Info.vue'
	export default {
		name: 'index',
		components: {
			Navs,
			Info
		},
		data() {
			return {
				form: {
					publishTimeLs: ''
				},
				loading: false,
				power: this.$power && this.$debug,
				config: null,
				packfile: {
					packVisible: false,
					name: 'file',
					path: 'C:/'
				},
				settingVisible: false,
				autoSaveTime: 0,

				Nav: {
					tree: null,
					Node: null,
					source: null,
				}
			}
		},
		computed: {
			savelabel() {
				if (this.config.autoSave && this.autoSaveTime != 0) {
					return `保存(${this.autoSaveTime}s)`
				}
				return '保存'
			}
		},
		methods: {
			init() {
				if (this.$debug) {
					this.$axios({
						url: "readConfig",
						method: "post",
					}).then(res => {
						this.config = res.data
					})
					this.$axios({
						url: "readSource",
						method: "post",
					}).then(res => {
						this.Nav.source = res.data
						window.document.title = this.Nav.source.name
						this.loading = false
					})
				} else {
					this.loading = false
				}
			},
			toSave(){
				this.$axios({
						url: "saveSource",
						method: "post",
						data: this.Nav.source
					})
			},
			save() {
				if (this.config.autoSave) {
					this.autoSaveTime = 0
					this.toSave()
				}
			},
			autoSava() {
				if (this.autoSaveTime > 0) {
					setTimeout(() => {
						this.autoSaveTime--
						this.autoSava()
					}, 1000)
				} else {
					this.save()
				}
			},
			checkSaveTime(val) {
				let reg = /^\d+$/
				if (!reg.test(val)) {
					this.$message.warning('参数错误,已重置为10')
					this.config.autoSaveTime = "10"
				}
			},
			changeTitle() {
				window.document.title = this.Nav.source.name
			},
			pack() {
				this.loading = true
				this.$axios({
					url: "pack",
					method: "post",
				}).then(() => {
					this.loading = false
				}).catch(() => {
					this.loading = false
				})
			},
			handleClose(done) {
				done();
				this.$axios({
					url: "saveConfig",
					method: "post",
					data: this.config
				})
				// this.$confirm('确认保存？').then(() => {
				// 	done();
				// })
			}
		},
		watch: {
			'Nav.source': {
				handler: function(val, old) {
					if (old && this.$debug && this.power) {
						if (this.config.autoSave && this.autoSaveTime == 0) {
							this.autoSaveTime = this.config.autoSaveTime
							this.autoSava()
						}
					}
				},
				deep: true
			},
		},
		created() {
			this.init()
		}
	}
</script>

<style scoped>
	.index {
		margin: 10px;
	}

	.power {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 1;
		margin: 10px;
	}

	.power>button {
		margin: 0 10px;
	}

	.NIB {
		display: flex;
		justify-content: space-between;
	}

	.Nav {
		flex: 0.15;
		min-width: 250px;
	}

	.Info {
		flex: 0.82;
		border: 0px solid #2C3E50;
	}
</style>
